<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>POI搜索</title>
    <script src="__PUBLIC__/echarts/echarts.min.js"></script>
    <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="__CSS__/admin.css"  media="all">
</head>
<style>
    .poinumbtn{
        font-size: 12px;
        margin-left: 5px;
    }
    .seemap:hover{
        color: #666;
    }
    .layui-upload-img{
        width: 200px;
        margin-right: 10px;
        margin-bottom: 10px;
    }
    .menu_span{
        line-height: 24px;
    }
</style>
<body>
<div class="layui-fluid main">

    <div style="display: inline-block;width:45%;position: fixed;background: #fff;z-index:999;">
        <fieldset class="layui-elem-field site-demo-button" style="margin-top:20px;border:0">
            <span class="layui-inline menu_span {if empty($param.typeid)}layui-btn-normal{/if}">
                <a href="{:url('admin/poi/poisearch')}" class="poinumbtn">所有（<span style="color: #f90">{$allnum}</span>）</a>
            </span>
            {volist name='classify_list' id='class_value'}
            <span class="layui-inline menu_span {if !empty($param.typeid)&&$param.typeid==$class_value['classify_id']}layui-btn-normal{/if}">
                <a href="{:url('admin/poi/poisearch',['typeid'=>$class_value['classify_id']])}" class="poinumbtn">{$class_value['classify_name']}（<span style="color: #f90">{$class_value['total_num']}</span>）</a>
            </span>
            {/volist}
        </fieldset>
        <fieldset class="layui-elem-field site-demo-button" style="margin-top: 10px;border:0">

            <form id="search_form" class="layui-form serch" action="/admin/poi/poisearch" method="post">
                <div class="layui-form-item" style="float: left;">
                    <div class="layui-inline">
                        <select name="groupid" id="groupid" class="layui-select" lay-search="">
                            <option value="">请选择城市</option>
                            {volist name='citylist' id='value'}
                            <option value="{$value.id}" {if !empty($param.groupid) && $param.groupid==$value['id']}selected{/if}>{$value.name}</option>
                            {/volist}
                        </select>
                    </div>
                    <div class="layui-inline">
                        <select name="is_stop" lay-search="" class="layui-select">
                            <option value="">是否显示</option>
                            <option value="1" {if isset($param.is_stop) && $param.is_stop==='1'}selected{/if}>隐藏</option>
                            <option value="0" {if isset($param.is_stop) && $param.is_stop==='0'}selected{/if}>显示</option>
                        </select>
                    </div>
                    <div class="layui-inline">
                        <select name="is_checked" lay-search="" class="layui-select">
                            <option value="">是否审核</option>
                            <option value="0" {if isset($param.is_checked) && $param.is_checked==='0'}selected{/if}>未审核</option>
                            <option value="1" {if isset($param.is_checked) && $param.is_checked==='1'}selected{/if}>已审核</option>
                        </select>
                    </div>

                    <div class="layui-input-inline">
                        <input type="text" name="name" value="{notempty name="$param.name"}{$param.name}{/notempty}" lay-verify="title" autocomplete="off" placeholder="请输入poi名称" class="layui-input layui-btn-sm">
                    </div>
                    <div class="layui-input-inline">
                        <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit="" lay-filter="serch">搜索</button>
                        <a class="layui-btn layui-btn-danger layui-btn-sm reset">重置</a>
                    </div>
                </div>
            </form>
        </fieldset>
    </div>
    <div style="display: inline-block;width:45%;margin-top: 200px;">
        <table class="layui-table"  lay-even="" lay-skin="line">
            <colgroup>
                <col width="50">
                <col width="300">
                <col width="300">
                <col width="200">
                <col width="200">
                <col width="200">
            </colgroup>
            <thead>
            <tr >
                <th>ID</th>
                <th>POI名称</th>
                <th>城市</th>
                <th>类型</th>
                <th>更新时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="poiList">
            {notempty name="$list"}
            {volist name="list" id="vo"}
            <tr  class="seemap" codeid="{$vo.id}">
                <td>{$vo.id}</td>
                <td><strong>{$vo.name}</strong><br/>{$vo.eng_name}</td>
                <td>{$vo.city}</td>
                <td>{$vo.type}</td>
                <td>{$vo.update_time}</td>
                <td class="operation-menu">
                    <a href="{if $vo.usemap=='amap'}{:url('admin/poi/addnewpoibyamap',['id'=>$vo.id])}{else}{:url('admin/poi/addpoi',['id'=>$vo.id])}{/if}" class="layui-btn layui-btn-xs a_menu" style="margin-left: 0;font-size:12px;">修改</a>
                    <a href="{:url('admin/poi/addticket',['id'=>$vo.id])}" class="layui-btn layui-btn-normal layui-btn-xs addticket" style="margin-top:5px;margin-left: 0;font-size:12px;">门票</a>
                    <a class="layui-btn layui-btn-xs layui-btn-danger delete" data-id="{$vo.id}" style="margin-top:5px;margin-left: 0;font-size:12px;">删除</a>
                    <form class="layui-form" method="POST">
                        <div class="layui-form-item" style="margin-bottom: 0">
                            <div class="layui-input-block" style="margin-left: 0">
                                <input type="checkbox" name="show" value="1" id="{$vo.id}" lay-filter="showPOI" lay-skin="switch" <?php if($vo['is_stop']==1){ echo 'checked';} ?> lay-text=" 隐藏|显示">
                            </div>
                        </div>
                    </form>
                    <form class="layui-form" method="POST">
                        <div class="layui-form-item" style="margin-bottom: 0">
                            <div class="layui-input-block" style="margin-left: 0">
                                <input type="checkbox" name="is_checked" value="1" data-id="{$vo.id}" lay-filter="checkPOI" lay-skin="switch" <?php if($vo['is_checked']==1){ echo 'checked';} ?> lay-text=" 已审|未审">
                            </div>
                        </div>
                    </form>
                </td>
            </tr>
            {/volist}
            {/notempty}
            </tbody>
        </table>
    </div>


    <div class="right75" style="width: 50%;margin: 10px 0;position: fixed;right: 0;top:0;bottom: 0;overflow-y: scroll;overflow-x: hidden;">
        <div style="margin: 10px 0;">
            {notempty name="$list[0]"}
            <div style="margin: 10px 0">
                <h2 id="poiname">{notempty name="$list[0]['name']"}{$list[0]['name']}{/notempty}</h2>
                <span class="color666" id="poieng_name">{notempty name="$list[0]['eng_name']"}{$list[0]['eng_name']}{/notempty}</span>
            </div>

            <div id="introduce" style="color: #9c9c9c">
                {notempty name="$list[0]['introduce']"}{$list[0]['introduce']} {/notempty}
            </div>


            <div id="mobile">
                {notempty name="$list[0]['mobile']"}
                <hr><strong>联系方式：</strong>
                <span  class="colorf90">{$list[0]['mobile']}</span>
                {/notempty}

            </div>

            <div id="grade">
                {notempty name="$list[0]['grade']"}
                <hr><strong>星级：</strong>
                <span class="colorf90">{$list[0]['grade']}</span>
                {/notempty}

            </div>
            <div id="ticket">
                {notempty name="$list[0]['ticket']"}

                <hr> <strong>门票信息：</strong>
                <span class="colorf90">{$list[0]['ticket']}</span>
                {/notempty}

            </div>
            <div id="open_time">
                {notempty name="$list[0]['open_time']"}

                <hr><strong>开放时间：</strong>
                <span  style="color: #9c9c9c">{$list[0]['open_time']}</span>
                {/notempty}

            </div>
            <div id="use_time">
                {notempty name="$list[0]['use_time']"}

                <hr><strong>用时参考：</strong>
                <span  style="color: #9c9c9c">{$list[0]['use_time']}</span>
                {/notempty}
            </div>

            <div id="source">
                {notempty name="$list[0]['source']"}

                <hr><strong>来源：</strong>
                <span  style="color: #9c9c9c">{$list[0]['source']}</span>
                {/notempty}

            </div>
            <div id="description">
                {notempty name="$list[0]['description']"}

                <hr><strong>特别说明：</strong>
                <span  style="color: #9c9c9c">{$list[0]['description']}</span>
                {/notempty}

            </div>

            <hr>
            <div style="margin: 10px  0" id="thumb">
                {notempty name="$list[0]['thumb']"}
                {if $thumb=array_filter(explode(',',$list[0]['thumb']))}
                {volist name="$thumb" id="vo"}
                {if !empty($vo)}
                <span class="uploadimgbox"><img class="layui-upload-img" src="{$vo}"></span>
                {/if}
                {/volist}
                {/if}
                {/notempty}
            </div>

            <div>
                <input type="hidden" id="poiImage" value="{if !empty($list[0]['id'])}{$list[0]['id']}{/if}">
                <a href="" class="layui-btn layui-btn-sm a_btn">
                    打开图片库
                </a>
            </div>

            <div id="map_thumb_img" style="margin-top: 20px;height:300px;">
                <img src="{if !empty($list[0]['map_thumb_img'])}{$list[0]['map_thumb_img']}{/if}" height="300" alt="">
            </div>
            <div id="address">
                {notempty name="$list[0]['address']"}

                <hr><strong>位置：</strong>
                <span  style="color: #9c9c9c">{$list[0]['address']}</span>
                {/notempty}

            </div>
            <div id="nearspots">
                {notempty name="$nearspots"}

                <hr><strong style="display: inline-block;margin-bottom: 10px">附近景点：</strong>
                <div style="color: #9c9c9c">
                    {volist name="$nearspots" id="vo"}
                    <span style="display: inline-block;width: 100%;" class="seemap" codeid="{$vo[2]}">{$vo[0]}({$vo[1]}km)</span>
                    <hr class="layui-bg-gray">
                    {/volist}
                </div>
                {/notempty}

            </div>
            <hr>
            {/notempty}
        </div>

    </div>
</div>
<script src="__PUBLIC__/layui/layui.js"></script>
<script src="__PUBLIC__/jquery/jquery.min.js"></script>
<script type="text/javascript">
    //初始化分页信息
    var pageInfo = {$pageInfo|json_encode};
    layui.use('layer', function(){
        var layer = layui.layer;
        $('.a_menu').click(function(){
            var url = $(this).attr('href');
            var a = 0;
            $.ajax({
                url:url
                ,async:false
                ,success:function(res){
                    if(res.code == 0) {
                        layer.msg(res.msg);
                        a = 1;
                    }
                }
            })
            if(a === 0) {
                layer.open({
                    type:2,
                    content:url,
                    area: ['95%', '95%'],
                    end:function(){
                        location.reload();
                    }
                });
            }
            return false;
        })
        $('.addticket').click(function(){
            var url = $(this).attr('href');

            layer.open({
                type:2,
                content:url,
                area: ['95%', '95%'],
                end:function(){
                    location.reload();
                }
            });
            return false;
        })
        $('.a_btn').click(function(){
            var id = $("#poiImage").attr('value');
            var url="/admin/poi/poiImage/id/"+id+".shtml";
            var a = 0;
            $.ajax({
                url:url
                ,async:false
                ,success:function(res){
                    if(res.code == 0) {
                        layer.msg(res.msg);
                        a = 1;
                    }
                }
            })
            if(a === 0) {
                layer.open({
                    type:2,
                    content:url,
                    area: ['80%', '95%'],
                    end:function(){
                        location.reload();
                    }
                });
            }
            return false;
        })
        $('.reset').click(function(){
            $('#search_form input').val("");
            $('#search_form select').val("");
            pageInfo.page = 1;
            pageInfo.offset = 20;
        })
    });
    layui.use('form', function () {
        var form = layui.form;
        form.on("switch(showPOI)",function(data){
            var id= $(this).attr('id');
            var stop;

            if(data.elem.checked){
                stop =1;
            }else{
                stop =0;
            }
            $.ajax({
                url:"{:url('admin/poi/modifyStopPoi')}",
                data:{'id':id,'stop':stop},
                type:'post',
                async: false,
                success:function(res) {
                    layer.msg(res.msg);
                    if(res.code == 200) {
                        setTimeout(function(){
                            //location.reload();
                        },1500)
                    }
                }
            })
        })
        form.on("switch(checkPOI)",function(data){
            var id= $(this).attr('data-id');
            var checked;
            if(data.elem.checked){
                checked = 1;
            }else{
                checked = 0;
            }
            $.ajax({
                url:"{:url('admin/poi/checkPoiInfo')}",
                data:{'id':id,'is_checked':checked},
                type:'post',
                async: false,
                success:function(res) {
                    layer.msg(res.msg);
                    if(res.code > 0) {
                        setTimeout(function(){
                            //location.reload();
                        },1000)
                    }
                }
            })
        })
        //防止加载两次
        var isLoad = false;
        $(window).scroll(function(){
            var loadHeight = 120;
            if($(window).height() + $(this).scrollTop() + loadHeight > $(document).height() && !isLoad){
                isLoad = true;
                //请求更多页
                if(pageInfo.page>=pageInfo.totalPage){
                    layer.msg('已无更多数据');return false;
                }
                pageInfo.page ++ ;
                var listload = layer.load(2);
                //请求下一页内容
                $.post("{:url('admin/poi/ajaxGetPoiList')}",pageInfo,function(res){
                    if(res.code < 1){layer.msg(res.msg);return false;}
                    pageInfo = res.data.pageInfo;
                    //渲染列表
                    renderMorePOI(res.data.list);
                    layer.close(listload);
                    isLoad = false;
                },'json')
            }
        })

        //渲染表格内容
        function renderMorePOI(list)
        {
            var html = '';
            $.each(list,function(i,v){
                var check_show = v.is_stop==1?'checked':'';
                var check_checked = v.is_checked==1?'checked':'';
                var edit_url = v.usemap=='amap'?'{:url("admin/poi/addnewpoibyamap")}':'{:url("admin/poi/addpoi")}';
                html += '<tr  class="seemap" codeid="'+v.id+'">\n' +
                    '                    <td>'+v.id+'</td>\n' +
                    '                    <td><strong>'+v.name+'</strong><br/>'+v.eng_name+'</td>\n' +
                    '                    <td>'+v.city+'</td>\n' +
                    '                    <td>'+v.type+'</td>\n' +
                    '                    <td>'+v.update_time+'</td>\n' +
                    '                    <td class="operation-menu">\n' +
                    '                        <a href="'+edit_url+'?id='+v.id+'" class="layui-btn layui-btn-xs a_menu" style="font-size:12px;margin:0;">修改</a>\n' +
                    '<a href="/admin/poi/addticket/id/'+v.id+'" class="layui-btn layui-btn-normal layui-btn-xs addticket" style="margin-top:5px;margin-left: 0;font-size:12px;">门票</a>\n'+
                    '<a class="layui-btn layui-btn-xs layui-btn-danger delete" data-id="'+v.id+'" style="margin-top:5px;margin-left: 0;font-size:12px;">删除</a>\n' +
                    '<form class="layui-form" method="POST">\n' +
                    '<div class="layui-form-item" style="margin-bottom: 0">\n' +
                    '<div class="layui-input-block" style="margin-left: 0">\n' +
                    '<input type="checkbox" name="show" value="1" id="'+v.id+'" lay-filter="showPOI" lay-skin="switch" '+check_show+' lay-text=" 隐藏|显示">\n' +
                    '</div>\n' +
                    '</div>\n' +
                    '</form>\n' +
                    '<form class="layui-form" method="POST">\n' +
                    '<div class="layui-form-item" style="margin-bottom: 0">\n' +
                    '<div class="layui-input-block" style="margin-left: 0">\n' +
                    '<input type="checkbox" name="is_checked" value="1" data-id="'+v.id+'" lay-filter="checkPOI" lay-skin="switch" '+check_checked+' lay-text=" 已审|未审">\n' +
                    '</div>\n' +
                    '</div>\n' +
                    '</form>\n' +
                    '                    </td>\n' +
                    '                </tr>'
            })
            $('#poiList').append(html);
            form.render();
        }
    })
    $('.delete').click(function(){
        var id = $(this).attr('data-id');
        layer.confirm('确定要删除?', function(index) {
            $.ajax({
                url:"{:url('admin/poi/delpoi')}",
                type:"post",
                data:{id:id},
                success:function(res) {
                    layer.msg(res.msg);
                    if(res.code == 1) {
                        setTimeout(function(){
                            location.href = res.url;
                        },1500)
                    }
                }
            })
        })
    })

    $("body").on("click",".seemap",function () {
        var id = $(this).attr('codeid');
        $.ajax({
            url:"{:url('admin/poi/seepoimap')}",
            data:{id:id},
            success:function(res) {
                if(res.code == 1) {
                    var data=res.data;
                    $("#poiname").html(data[0].name);
                    $("#poieng_name").html(data[0].eng_name);
                    $("#introduce").html(data[0].introduce);

                    // $("#description").html(data[0].description);

                    if(data[0].description!=""){
                        $("#description").html('<hr><strong>特别说明：</strong>' +
                            '<span style="color: #9c9c9c">'+data[0].description+'</span>');
                    }else{
                        $("#description").html("");
                    }

                    if(data[0].mobile!=""){
                        $("#mobile").html('<hr><strong>联系方式：</strong>' +
                            '                <span class="colorf90"  >'+data[0].mobile+'</span>');
                    }else{
                        $("#mobile").html("");
                    }

                    // $("#mobile").html(data[0].mobile);

                    if(data[0].ticket!=""&&data[0].ticket!=null){
                        $("#ticket").html('<hr><strong>门票信息：</strong>' +
                            '                <span class="colorf90"  >'+data[0].ticket+'</span>');
                    }else{
                        $("#ticket").html("");
                    }

                    // $("#ticket").html(data[0].ticket);

                    if(data[0].open_time!=""){
                        $("#open_time").html('<hr><strong>开放时间：</strong>' +
                            '<span style="color: #9c9c9c"  >'+data[0].open_time+'</span>');
                    }else{
                        $("#open_time").html("");
                    }


                    if(data[0].use_time!=""){
                        $("#use_time").html('<hr><strong>用时参考：</strong>' +
                            '<span style="color: #9c9c9c"  >'+data[0].use_time+'</span>');
                    }else{
                        $("#use_time").html("");
                    }


                    // $("#open_time").html(data[0].open_time);



                    // $("#source").html(data[0].source);

                    if(data[0].source!=""){
                        $("#source").html('<hr><strong>来源：</strong>' +
                            '<span  style="color: #9c9c9c">'+data[0].source+'</span>');
                    }else{
                        $("#source").html("");
                    }

                    if(data[0].grade!=0){
                        $("#grade").html('<hr><strong>星级：</strong>\n' +
                            '<span style="color: #9c9c9c" >'+data[0].grade+'</span>');
                    }else{
                        $("#grade").html("");
                    }

                    // $("#address").html(data[0].address);

                    if(data[0].address!=""){
                        $("#address").html('<hr><strong>位置：</strong>' +
                            '<span style="color: #9c9c9c" >'+data[0].address+'</span>');
                    }else{
                        $("#address").html("");
                    }


                    var nearspotsbox="";
                    for(var i=0 ;i<data[0].nearspots.length;i++){
                        nearspotsbox+=' <span style="display: inline-block;width: 100%;" class="seemap" codeid="'+data[0].nearspots[i][2]+'">'+data[0].nearspots[i][0]+'('+data[0].nearspots[i][1]+'km)</span><hr class="layui-bg-gray">';
                    }

                    // $("#nearspots").html(nearspotsbox);
                    if(nearspotsbox!=""){
                        $("#nearspots").html('<hr><strong style="display: inline-block;margin-bottom: 10px">附近景点：</strong><div style="color: #9c9c9c">' + nearspotsbox+'</div></span>');
                    }else{
                        $("#nearspots").html("");
                    }

                    var thumbbox="";
                    var thumbs=data[0].thumb.split(",");
                    for (var i=0;i<thumbs.length;i++){
                        if(thumbs[i]){
                            thumbbox+='<span class="uploadimgbox"><img class="layui-upload-img" src="'+thumbs[i]+'"></span>'
                        }
                    }
                    $("#thumb").html(thumbbox);
                }else{
                    layer.msg(res.msg);
                }
            }
        })


    })

</script>
</body>
</html>
